/**
 * Created by zhujiaming on 17/5/7.
 */
import React, {Component} from 'react';
import {
    Dimensions,
    StyleSheet,
    Text,
    View,
    TextInput,
    TouchableOpacity,
    ToastAndroid
} from 'react-native';
import {connect} from 'react-redux';
import {loginActions} from './actions';

class LoginView extends Component {
    constructor(props) {
        super(props);
        this.onLoginPress = this.onLoginPress.bind(this);
        this.onRegistPress = this.onRegistPress.bind(this);
        this.doLogin = this.doLogin.bind(this);
        this.state = {
            userNameInput: '',
            userPasswordInput: '',
        }
    }

    shouldComponentUpdate(nextProps, nextState) {
        // console.log('shouldComponentUpdate  nextProps--->', nextProps);
        // console.log('shouldComponentUpdate  nextState--->', nextState);
        return true;
    }

    componentDidMount() {
        // console.log('componentDidMount  dispatch--->', this.props.dispatch);
    }

    render() {
        return (this.props.isLogin ?
            <View style={styles.container}>
                <Text style={styles.titleTextStyle}>登录成功...</Text>
            </View>
            :
            <View style={styles.container}>
                <Text style={styles.titleTextStyle}>欢迎使用</Text>
                {/*用户名*/}
                <TextInput style={styles.textInputStyle}
                           maxLength={20}
                           placeholder={'用户名'}
                           selectionColor={'red'}
                           onChangeText={(text) => {
                               this.setState({userNameInput: text})
                           }}
                />
                {/*密码*/}
                <TextInput style={[styles.textInputStyle, {marginTop: 5}]}
                           maxLength={20}
                           placeholder={'密码'}
                           selectionColor={'red'}
                           secureTextEntry={true}
                           onChangeText={(text) => {
                               this.setState({userPasswordInput: text})
                           }}
                />

                {/*登录*/}
                <TouchableOpacity activeOpacity={0.7} style={styles.comBtnStyle}
                                  onPress={this.onLoginPress}>
                    <Text style={styles.comBtnTextStyle}>登录</Text>
                </TouchableOpacity>

                {/*注册*/}
                <TouchableOpacity activeOpacity={0.7} style={[styles.comBtnStyle, {marginTop: 5}]}
                                  onPress={this.onRegistPress}>
                    <Text style={styles.comBtnTextStyle}>注册</Text>
                </TouchableOpacity>
            </View>);
    }

    onLoginPress() {
        if (this.state.userPasswordInput && this.state.userNameInput && this.state.userPasswordInput != '' && this.state.userNameInput != '') {
            this.props.dispatch(this.doLogin(this.state.userNameInput, this.state.userPasswordInput));
        } else
            ToastAndroid.show("用户名/密码为空！", ToastAndroid.SHORT);
    }

    doLogin(userName, password) {
        return (dispatch) => {
            dispatch({type: 'showLoading'});
            console.log("dispatch action  showLoading");
            setTimeout(() => {
                dispatch({type: 'hideLoading'});
                if (userName === 'aaa' && password === '000') {
                    dispatch({type: loginActions.ACTION_LOGIN_SUCCESS});
                    console.log("dispatch action  ACTION_LOGIN_SUCCESS");
                } else {
                    dispatch({type: loginActions.ACTION_LOGIN_FAIL});
                    console.log("dispatch action  ACTION_LOGIN_FAIL");
                }
            }, 3000);
        }
    }

    onRegistPress() {
        ToastAndroid.show('去注册', ToastAndroid.SHORT);
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    },
    titleTextStyle: {
        color: 'blue',
        fontSize: 30,
    },
    textInputStyle: {
        height: 40,
        width: Dimensions.get('window').width - 20,
        borderColor: 'gray',
        borderWidth: 1,
        borderRadius: 5,
        marginTop: 50,
        textAlign: 'center',
        textAlignVertical: 'center',
    },
    comBtnStyle: {
        marginTop: 30,
        backgroundColor: '#e9e9e9'
    },
    comBtnTextStyle: {
        width: Dimensions.get('window').width - 30,
        height: 40,
        textAlign: 'center',
        textAlignVertical: 'center',
    }
});

function mapStoreToProps(store) {
    return {
        isLogin: store.login.isLogin,
    }
}

// function mapDispatchToProps(dispatch, ownProps) {
//     return {
//         onLoginPress: (userName, password) => {
//             dispatch({
//                 type: loginActions.ACTION_LOGIN,
//                 userName,
//                 password,
//             });
//         }
//     };
// }

export default connect(mapStoreToProps)(LoginView);